
<!--
     参照：
     http://gallery.echartsjs.com/editor.html?c=xH10kor7hf
-->
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>html5 echarts地图分布动画特效</title>
	<style>
		html,body{margin:0;padding:0;}
	</style>
</head>

<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> 
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->

<div id="main" style="width: 60%;height: 100%;">
</div>
<!--Step:2 Import echarts.js--> 
<!--Step:2 引入echarts.js-->
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'7c6e0dbe10b7a158187252d224b82da3',
    }
</script>
<!-- <script src="https://webapi.amap.com/maps?v=1.4.8&key=2a5072bcb1b308fb0a64020a0f868016&plugin=AMap.ControlBar"></script> -->
<script src="https://webapi.amap.com/maps?v=1.4.8&key=ae82f1373cedbca373e78dba0188b6b9"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>-->
<script src="../Echarts/js/package/dist/echarts.js"></script>
<script src="./echarts-amap.min.js" charset="UTF-8"></script>

<script type="text/javascript">
   var data=   [
        // 出发地
        {
            "name": "金华to东阳",
            "type": "effectScatter",
            "coordinateSystem": "amap",
            "zlevel": 2,
            "rippleEffect": {
                "brushType": "stroke"
            },
            "label": {
                "normal": {
                    "show": true,
                    "position": "bottom",
                    "formatter": "{b}"
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#bb3f7d"
                }
            },
            "data": [
                {
                    "name": "金华",
                    "value": [119.647265,29.079195]
                }
            ]
        },
        // 动态
        {
            "name": "金华to东阳",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 1,
            //"symbol":"arrow",
            "effect": {
                "show": true,
                "period": 6,
                "trailLength": 0.7,
                "color": "#fff",
                "symbolSize": 8,
                "symbol":"arrow", // 出现三角形
                "trailLength":0, //控制时候又尾巴效果
                "color":"#fccf02" //配置三角形颜色
            },
            "lineStyle": {
                "normal": {
                    "color": "#a6c84c",
                    "width": 0,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "fromName": "金华",
                    "toName": "东阳",
                    "coords": [
                        [119.647265,29.079195],
                        [120.24179,29.290158]
                    ],
                    "value": 95
                }
            ]
        },
        // 静态
        {
            "name": "金华to东阳",
            "coordinateSystem": "amap",
            "type": "lines",
            "zlevel": 2,
            "symbol": [
                "none",
                "none"
            ],
            "symbolSize": 10,
            "lineStyle": {
                "normal": {
                    "color": "#d9ad28",
                    "width": 1,
                    "opacity": 0.6,
                    "curveness": 0.2,
                    "type": "dashed"
                }
            },
            "data": [
                {
                    "fromName": "金华",
                    "toName": "东阳",
                    "coords": [
                        [119.647265,29.079195],
                        [120.24179,29.290158]
                    ],
                    "value": 95
                }
            ]
        },
        // 目的地
        {
            "name": "金华to东阳",
            "type": "effectScatter",
            "coordinateSystem": "amap",
            "zlevel": 2,
            "rippleEffect": {
                "brushType": "stroke"
            },
            "label": {
                "normal": {
                    "show": true,
                    "position": "bottom",
                    "formatter": "{b}"
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#bb3f7d"
                }
            },
            "data": [
                {
                    "name": "东阳",
                    "value": [120.24179,29.290158, 95]
                }
            ]
        }
    ];
    $(function(){
        getMap("main",data);
    })
    function getMap(_ele,_data){
        var myChart = echarts.init(document.getElementById(_ele));
        myChart.setOption({
            amap: {
                maxPitch: 60,
                pitch: 10, //45 俯仰角
                viewMode: '3D',
                zoom: 8,
                expandZoomRange: true,
                zooms: [3, 20],
                mapStyle: 'amap://styles/10f4acdafb5f93d0aabe16804bc3c22e',
                center: [119.647265,29.079195],
                rotation: 0,
                resizeEnable: true,
            },
            animation: false,
            series:[]
        });
        var map = myChart.getModel().getComponent('amap').getAMap();
        var layer = myChart.getModel().getComponent('amap').getLayer(); 
        myChart.setOption({
            series: _data
        });

        layer.render = function() {
            myChart.setOption({
                series: _data
            });
        }
        
    }
</script>

</body>
</html>